<template>
    <div class="epidemic-situation">
        <h2 class="title">国内疫情地图</h2>
        <!--<div id="main" style="width: 20rem;height: 30rem;"></div>-->

        <div class='map'>
            <van-tabs  v-model:active="active" animated @change="change">
                <!--van-tab类似于v-if,会默认读取第一个,其他的display:none,此时页面上没有给DOM节点-->
                <van-tab title="现存确诊">
                    <!--现存确诊-->
                    <div id="noMain" style="width: 100%;height: 6rem;"></div>
                </van-tab>
                <van-tab title="累积确诊">
                    <!--累积确诊-->
                    <!--第三方库,在加载页面时还没有DOM节点,库的加载是异步的,按需加载的-->
                    <div id="main" style="width: 100%;height: 6rem;"></div>
                </van-tab>
            </van-tabs>
        </div>      
    </div>
</template>

<script>
    import echarts from 'echarts'
    import api from '../../../api/index'

    export default {
        name: "VueEcharts",
        data() {
            return {
                active: 0,
                curData: [],
            }
        },
        async mounted() {
            // this.$myChart.line('main');
            // 获取疫情数据
            const result = await api.getChinaData();
            if(result.data.codeid === 10000) {
                this.curData = result.data.retdata.map((item) => {
                    return {
                        name: item.xArea,
                        value: item.confirm,
                    }
                });

                let nowData = result.data.retdata.map((item) => {
                    return {
                        name: item.xArea,
                        value: item.curConfirm,
                    }
                });

                // vue里面,等待延迟加载
                this.$nextTick(() => {
                    // this.$myChart.chineseMap('main',curData);
                    this.$myChart.chineseMap('noMain',nowData);
                })
            }else {
                console.log('获取疫情数据接口错误')
            }

        },
        methods: {
            change(name,title) {
                if(title === '累积确诊') {
                    this.$nextTick(() => {
                        this.$myChart.chineseMap('main',this.curData);
                    })
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .epidemic-situation{
        /*margin-top: 0.5rem;*/
        width: 95%;
        padding-left: 0.1rem;
        box-sizing: border-box;
        .title{
            padding: 0.2rem;
        }
        .map {
            border-radius: 5px;
            box-shadow: 0 0 3px 2px rgba(0, 0, 0,.2);
            margin-left: 0.3rem;
            #main,#noMain  {
                margin: 0 auto;
                background-color: #f5f5f5;
            }
        }
       
    }

</style>
